import React, { useState } from 'react';
import { View, Text } from '@tarojs/components';

import './tabs.scss';

const Tabs = ({ tabsList = [], getCurrentTab = null, defaultTab = 0 }) => {
  const [currentTab, setCurrentTab] = useState(defaultTab);
  const [switchDown, setSwitchDown] = useState(false);

  const setTab = (index) => {
    if (index !== currentTab || (index === currentTab && tabsList[index].switch)) {
      if (index === currentTab && tabsList[index].switch) {
        setSwitchDown(!switchDown);
      } else {
        setSwitchDown(false);
      }
      setCurrentTab(index);
      getCurrentTab(index);
    }
  };

  return (
    <View className="shoppingMallTabs">
      {tabsList.map((tab, index) => (
        <View className="itemTab" onClick={() => setTab(index)} key={tab.label + '_' + index}>
          <View className="item">
            <Text className={['label', currentTab === index && 'act'].join(' ')}>{tab.label}</Text>
            {currentTab === index && <Text className="active customePageBackgroundStyle"></Text>}
          </View>
          {tab.switch && (
            <View className="arr" key={tab.label + '_arrow' + index}>
              <View
                className={['arrUp', currentTab === index && !switchDown && 'arrAct'].join(' ')}
              ></View>
              <View
                className={['arrDown', currentTab === index && switchDown && 'arrAct'].join(' ')}
              ></View>
            </View>
          )}
        </View>
      ))}
    </View>
  );
};

export default Tabs;
